<template>
	<div class="my-favorites-container">
		<!-- 收藏列表区域 -->
		<div v-if="favorites.length > 0">
			<van-cell v-for="(favorite, index) in favorites" :key="favorite.id" clickable
				@click="showFavoriteDetail(favorite)">
				<template #title>
					<span>{{ favorite.title }}</span>
					<van-icon name="delete-o" size="18" color="#ff5252" @click.stop="deleteFavorite(index)" />
				</template>
			</van-cell>
		</div>
		<div v-else>
			<p class="empty-tip">你还没有收藏任何内容哦~</p>
		</div>
		<!-- 添加收藏输入框和按钮 -->
		<div class="add-favorite-section">
			<van-field v-model="newFavoriteTitle" placeholder="请输入收藏标题" clearable />
			<van-button type="primary" size="small" @click="addFavorite">添加收藏</van-button>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				favorites: [],
				newFavoriteTitle: ''
			};
		},
		created() {
			const favorites = JSON.parse(localStorage.getItem('favorites')) || [];
			this.favorites = favorites;
		},
		methods: {
			addFavorite() {
				if (this.newFavoriteTitle.trim()) {
					const newFavorite = {
						id: Date.now(),
						title: this.newFavoriteTitle,
						type: "other"
					};
					this.favorites.push(newFavorite);
					localStorage.setItem('favorites', JSON.stringify(this.favorites));
					this.newFavoriteTitle = '';
				}
			},
			showFavoriteDetail(favorite) {
				console.log(`查看收藏详情：`, favorite);
				// 这里可以添加跳转到详情页面的逻辑
			},
			deleteFavorite(index) {
				this.favorites.splice(index, 1);
				localStorage.setItem('favorites', JSON.stringify(this.favorites));
			}
		}
	};
</script>

<style scoped>
	.my-favorites-container {
		max-width: 800px;
		margin: 0 auto;
		padding: 20px;
		border: 1px solid #e0e0e0;
		border-radius: 10px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		background-color: #f9f9f9;
		font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		line-height: 1.8;
	}

	.title {
		font-size: 36px;
		color: #2c3e50;
		margin-bottom: 25px;
		text-align: center;
		text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
	}

	.empty-tip {
		text-align: center;
		color: #7f8c8d;
		margin-top: 25px;
		font-style: italic;
	}

	.van-cell {
		position: relative;
		padding-right: 40px;
		/* 为删除图标留出空间 */
		transition: background-color 0.3s ease;
	}

	.van-cell:hover {
		background-color: #ecf0f1;
	}

	.van-icon {
		position: absolute;
		right: 15px;
		top: 50%;
		transform: translateY(-50%);
		cursor: pointer;
		transition: color 0.3s ease;
	}

	.van-icon:hover {
		color: #c0392b;
	}

	.add-favorite-section {
		display: flex;
		gap: 10px;
		margin-top: 20px;
	}
</style>